<template>
  <div class="comment-container">
    <div class="comment-article-list">
      <p class="list-p">选择文章</p>
      <ul>
        <li class="list-item"
            :class="{'list-item-actived': index===isActived}"
            v-if="commentList.length!==0"
            v-for="(comment,index) in commentList"
            @click="switchComment(comment.articleid,index)">
          <span class="title">
            {{sortFilter(comment.articleid)}}
          </span>
          <span class="num">
            ({{comment.commentlist.length}})
          </span>
        </li>
      </ul>
    </div>
    <div class="comment-list-wrp" v-if="articleid">
      <i-comment :articleid="articleid"></i-comment>
    </div>
    <div class="no-selected" v-else>
      选择一篇文章
    </div>
  </div>
</template>
<script>
import iComment from 'base/comment'
export default{
  name: 'commentContainer',
  data() {
    return {
      keyword: '',
      articleid: '',
      isActived: '',
      blogList: [],
      commentList: []
    }
  },
  created() {
    this.$store.dispatch('GetBlogList', { pageindex: 1, pagesize: 1000 }).then((res) => {
      this.blogList = res.list
    })
    this.$store.dispatch('GetCommentList').then((res) => {
      this.commentList = res.list
    })
  },
  components: {
    iComment
  },
  methods: {
    switchComment(id, index) {
      this.isActived = index
      this.articleid = id
    },
    sortFilter(id) {
      const s = this.blogList.filter(blog => {
        return id === blog._id
      })
      return s[0] && s[0].title
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.comment-container {
  display: flex;
  margin: 10px;
  padding: 10px;
  // width: 200px;
  // overflow: hidden;
  height: 100%;
  background: #fff;
  .comment-article-list {
    flex: 0 0 200px;
    border-radius: 5px;
    border: 1px solid #ccc;
    min-height: 300px;
    // padding-top: 20px;
    padding-bottom: 20px;
    .list-p {
      margin: 0px;
      padding: 10px;
      color: #666;
      background: #ccc;
    }
    .list-item {
      height: 40px;
      padding: 10px;
      display: flex;
      border-top: 1px solid #ccc;
      cursor: pointer;
      &:last-child {
        border-bottom: 1px solid #ccc;
      }
      .title {
        flex: 1;
        max-width: 160px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .num {
        align-self: center;
        flex: 0 0 16px;
        font-size: 12px;
        color: #999;
      }
    }
    .list-item-actived {
      background: #f1f1f1;
    }
  }
  .comment-list-wrp {
    border-radius: 5px;
    font-size: 14px;
    margin-left: 10px;
    border: 1px solid #ccc;
    background: #f1f1f1;
    flex: 1;
  }
  .no-selected {
    border-radius: 5px;
    font-size: 14px;
    margin-left: 10px;
    border: 1px solid #ccc;
    background: #f1f1f1;
    flex: 1;
    text-align: center;
    padding-top: 150px;
    font-size: 30px;
    color: #ccc;
  }
}
</style>
